{layout name="common/layout"}
<div class="bj_hui">
    <div class="zixun_tit">
        <span>关于胡博士珠宝典藏证书</span>
        <p>About the certificate of Dr. Hu's jewellery collection</p>
    </div>

    <div class="zt_da">

        <div class="zx_lie_left">
            <p>珠宝典藏证书</p>
            <ul>
                <li><a href="/addons/shop/certificate/list">关于胡博士珠宝典藏证书</a></li>
                <li><a href="/addons/shop/certificate/search" class="on">典藏证书查询</a></li>
            </ul>
        </div>

        <div class="center_da_b kongxi">
            <div class="zx_lie_right_1">
                <p>典藏证书查询</p>
            </div>
            <div class="rh_inp" style="margin-top:15px;">
                <input type="text" id="sn" placeholder="请输入证书编号" class="rh_tx"/>
            </div>
            <div class="rh_inp">
                <input type="text" id="code" placeholder="请输入文件码" class="rh_tx"/>
            </div>
            <div class="rh_inp">
                <input type="button" value="点击查询" class="rh_tx_t"/>
            </div>
        </div>
    </div>
</div>
<script>
    document.querySelector('input[type=button]').addEventListener('click', function () {
        let sn   = document.querySelector('#sn').value
        let code = document.querySelector('#code').value
        fetch('/addons/shop/certificate/search', {
            method : 'post',
            headers: {'Content-Type': 'application/json'},
            body   : JSON.stringify({sn, code}),
        }).then(r => r.json()).then(r => {
            if (r.code === 1) {
                let img    = new Image();
                img.onload = function () {
                    //避免图片太大，导致弹出展示超出了网页显示访问，所以图片大于浏览器时下窗口可视区域时，进行等比例缩小。
                    let max_height = $(window).height() - 100;
                    let max_width  = $(window).width();

                    //rate1，rate2，rate3 三个比例中取最小的。
                    let rate1 = max_height / img.height;
                    let rate2 = max_width / img.width;
                    let rate3 = 1;
                    let rate  = Math.min(rate1, rate2, rate3);

                    //等比例缩放
                    let imgHeight = img.height * rate; //获取图片高度
                    let imgWidth  = img.width * rate; //获取图片宽度

                    let imgHtml = "<img src='" + r.url + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>";

                    layer.open({
                        type  : 1,//可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        shade : 0.6,
                        maxmin: true,
                        anim  : 1,
                        title : '图片预览',
                        area  : ['auto', 'auto'],
                        // skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content   : imgHtml
                    });
                }

                img.src = r.url;
            } else {
                layer.msg('查询失败')
            }
        })
    })
</script>
